<template>
  <div class="gate-body">
    <el-row :gutter="40">
      <el-col :span="5">
        <el-button type="text" @click="updatePwdHelp">修改密码</el-button>
        <el-button type="text" @click="logout">退出登录</el-button>
        <el-divider>闸门列表</el-divider>
        <div class="gate-list">
          <el-table
            ref="doorTable"
            :data="doorData"
            v-loading="doorLoading"
            size="mini"
          >
            <el-table-column
              property="name"
              label="闸门名称"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="addWxGate(scope.row)"
                  >添加
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            small
            @size-change="getDoorList"
            @current-change="getDoorList"
            :current-page.sync="doorPage.page"
            :page-size="doorPage.pageSize"
            layout="prev, pager, next, jumper"
            :total="doorPage.total"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="19">
        <el-divider>扫码收费闸门</el-divider>
        <el-table
          ref="wxGateTable"
          :data="wxGateData"
          v-loading="wxGateLoading"
          size="mini"
        >
          <el-table-column
            property="gateName"
            label="闸门名称"
            width="160"
          ></el-table-column>
          <el-table-column
            property="gateCode"
            label="闸门编号"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="240">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="updateWxGate(scope.row)"
                >修改
              </el-button>
              <el-button type="text" size="small" @click="getQrCode(scope.row)"
                >获取二维码
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteWxGate(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider>闸门通行记录</el-divider>
        <el-form :inline="true" :model="wxGateRecordSearch" class="search-from">
          <el-form-item>
            <el-select
              placeholder="请选择闸门"
              v-model="wxGateRecordSearch.id"
              @change="getWxGateRecordList"
            >
              <el-option
                v-for="item in wxGateData"
                :key="item.id"
                :label="item.gateName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="wxGateRecordSearchTime"
              @change="changeWxGateRecordTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            总金额：
            <strong class="total-money">{{
              wxGateRecordPage.totalMoney
            }}</strong>
          </el-form-item>
        </el-form>
        <el-table
          ref="wxGateRecordTable"
          :data="wxGateRecordData"
          v-loading="wxGateRecordLoading"
          size="mini"
        >
          <el-table-column
            property="openid"
            label="人员微信编号"
          ></el-table-column>
          <el-table-column
            property="money"
            label="金额"
            width="100"
          ></el-table-column>
          <el-table-column
            property="time"
            label="通行时间"
            width="180"
          ></el-table-column>
          <el-table-column
            property="gateName"
            label="闸门名称"
            width="160"
          ></el-table-column>
          <el-table-column property="isOver" label="是否完结" width="100">
            <template slot-scope="scope">
              {{ scope.row.isOver ? "是" : "否" }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          small
          @size-change="getWxGateRecordList"
          @current-change="getWxGateRecordList"
          :current-page.sync="wxGateRecordPage.page"
          :page-size="wxGateRecordPage.pageSize"
          layout="prev, pager, next, jumper"
          :total="wxGateRecordPage.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <gate-info :wx-gate-info="wxGateInfo" :add-flag="isAdd"></gate-info>
    <gate-qr-code
      :gate-id="wxGateInfo == null ? null : wxGateInfo.id"
    ></gate-qr-code>
    <update-pwd></update-pwd>
  </div>
</template>

<script>
import WxGate from "@/api/WxGate";
import WxGateRecord from "@/api/WxGateRecord";
import WxGateUser from "@/api/WxGateUser";
import { mapMutations } from "vuex";
import GateInfo from "@/components/GateInfo";
import GateQrCodeInfo from "@/components/GateQrCodeInfo";
import UpdatePwd from "@/components/UpdatePwd";

export default {
  components: {
    gateInfo: GateInfo,
    gateQrCode: GateQrCodeInfo,
    updatePwd: UpdatePwd
  },
  props: {},
  data() {
    return {
      wxGateApi: null,
      wxGateRecordApi: null,
      wxGateUserApi: null,
      doorLoading: false,
      doorData: [],
      doorPage: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      wxGateLoading: false,
      wxGateData: [],
      wxGateInfo: null,
      isAdd: true,
      wxGateRecordLoading: false,
      wxGateRecordData: [],
      wxGateRecordPage: {
        page: 1,
        pageSize: 10,
        total: 0,
        totalMoney: 0
      },
      wxGateRecordSearchTime: null,
      wxGateRecordSearch: {
        id: "",
        begin: "",
        end: ""
      }
    };
  },
  computed: {
    gateInfoFlag() {
      return this.$store.state.gate_info_dialog;
    },
    gateQrcodeFlag() {
      return this.$store.state.gate_qr_code_dialog;
    }
  },
  watch: {
    gateInfoFlag(val) {
      if (!val) {
        this.getWxGateList();
        this.isAdd = true;
        this.wxGateInfo = null;
      }
    },
    gateQrcodeFlag(val) {
      if (!val) {
        this.wxGateInfo = null;
      }
    }
  },
  created() {
    this.wxGateApi = new WxGate();
    this.wxGateRecordApi = new WxGateRecord();
    this.wxGateUserApi = new WxGateUser();
    this.getDoorList();
    this.getWxGateList();
    this.getWxGateRecordList();
  },
  methods: {
    ...mapMutations([
      "changeGateInfoDialog",
      "changeGateQrCodeDialog",
      "changeUpdatePwdDialog"
    ]),
    getDoorList() {
      this.doorLoading = true;
      this.wxGateApi.getDoorList(
        this.doorPage.page,
        this.doorPage.pageSize,
        res => {
          this.doorLoading = false;
          if (res.code === 0) {
            this.doorData = res.data;
            this.doorPage.total = res.total;
          } else {
            this.$message.error(res.msg);
          }
        },
        () => {
          this.doorLoading = false;
          this.$message.error("获取闸门列表失败");
        }
      );
    },
    getWxGateList() {
      this.wxGateApi.query(res => {
        if (res.code === 0) {
          this.wxGateData = res.data;
        }
      });
    },
    changeWxGateRecordTime() {
      this.wxGateRecordSearch.begin = null;
      this.wxGateRecordSearch.end = null;
      if (
        this.wxGateRecordSearchTime &&
        this.wxGateRecordSearchTime.length === 2
      ) {
        this.wxGateRecordSearch.begin = this.wxGateRecordSearchTime[0];
        this.wxGateRecordSearch.end = this.wxGateRecordSearchTime[1];
      }
      this.getWxGateRecordList();
    },
    getWxGateRecordList() {
      this.wxGateRecordLoading = true;
      this.wxGateRecordApi.query(
        this.wxGateRecordSearch.id,
        this.wxGateRecordSearch.begin,
        this.wxGateRecordSearch.end,
        this.wxGateRecordPage.page,
        this.wxGateRecordPage.pageSize,
        res => {
          this.wxGateRecordLoading = false;
          if (res.code === 0) {
            this.wxGateRecordData = res.data;
            this.wxGateRecordPage.total = res.total;
            this.wxGateRecordPage.totalMoney = res.msg;
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    updatePwdHelp() {
      this.changeUpdatePwdDialog(true);
    },
    logout() {
      this.wxGateUserApi.logout(res => {
        if (res.code === 0) {
          this.$message.success("退出成功");
          this.$router.push("/login");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    addWxGate(row) {
      this.isAdd = true;
      this.wxGateInfo = {
        gateName: row.name,
        gateCode: row.indexCode,
        price1times: null,
        price2times: null,
        price3times: null,
        price1: 0,
        price1BeginTime: "",
        price1EndTime: "",
        price2: 0,
        price2BeginTime: "",
        price2EndTime: "",
        price3: 0,
        price3BeginTime: "",
        price3EndTime: ""
      };
      this.changeGateInfoDialog(true);
    },
    updateWxGate(row) {
      this.wxGateInfo = row;
      this.wxGateInfo.price1times = [row.price1BeginTime, row.price1EndTime];
      this.wxGateInfo.price2times = [row.price2BeginTime, row.price2EndTime];
      this.wxGateInfo.price3times = [row.price3BeginTime, row.price3EndTime];
      this.isAdd = false;
      this.changeGateInfoDialog(true);
    },
    deleteWxGate(row) {
      this.wxGateApi.del(row.id, res => {
        if (res.code === 0) {
          this.getWxGateList();
          this.$message.success("删除成功");
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    getQrCode(row) {
      this.wxGateInfo = row;
      this.changeGateQrCodeDialog(true);
    }
  }
};
</script>

<style lang="scss" scoped>
.gate-body {
  width: 90%;
  margin: 0 auto;
  padding-top: 20px;
}

.gate-list {
  text-align: center;
}

.el-pagination {
  margin-top: 10px;
  text-align: center;
}

.total-money {
  font-size: 20px;
  color: red;
}
</style>
